<template>
  <div class="app-content">
    <div class="main">
      <div class="main-aside">
        <mm-menu :page="page"></mm-menu>
      </div>
      <div class="main-content">
        <transition name="scale" mode="out-in" appear>
          <router-view @layout:load="layout"></router-view>
        </transition>
      </div>
      <logsbut/>
    </div>
  </div>
</template>

<script>

  import MmMenu from "./layout/menu";
  import Logsbut from "./device/logsbut";

  export default {
	name: "index",
	components: {Logsbut, MmMenu},
	data() {
	  return {
		page: "home"
	  };
	},
	methods: {
	  layout: function (page) {
		this.page = page;
	  },
	}
  };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @require "../ui/common/stylus/variable.styl"
  .main {
    position relative;
    min-height 100vh;
    margin 0;

    .main-aside {
      position fixed;
      box-sizing: border-box;
      height 100vh;
      width 160px;
    }

    .main-content {
      margin-left 160px;
    }
  }
</style>
